<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Zoom + Pan</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

svg {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var size = [710, 500], // width height
    padding = [4, 4, 20, 40], // top right bottom left
    tx = function(d) { return "translate(" + x(d) + ",0)"; },
    ty = function(d) { return "translate(0," + y(d) + ")"; },
    stroke = function(d) { return d ? "#ccc" : "#666"; };

// x-scale (1.42 = 710/500)
var x = d3.scale.linear()
    .domain([-1.42, +1.42])
    .range([0, size[0]]);

// y-scale (inverted domain)
var y = d3.scale.linear()
    .domain([+1.00, -1.00])
    .range([0, size[1]]);

var svg = d3.select("body").append("svg")
    .attr("width", size[0] + padding[3] + padding[1])
    .attr("height", size[1] + padding[0] + padding[2])
    .attr("pointer-events", "all")
  .append("g")
    .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
    .call(d3.behavior.zoom()
      .extent([[0, size[0]], [0, size[1]], [0, Infinity]])
      .on("zoom", redraw))
  .append("g");

// Generate x-ticks…
var gx = svg.selectAll("g.x")
    .data(x.ticks(10))
  .enter().append("g")
    .attr("class", "x")
    .attr("transform", tx);

gx.append("line")
    .attr("stroke", stroke)
    .attr("y1", 0)
    .attr("y2", size[1]);

gx.append("text")
    .attr("y", size[1])
    .attr("dy", "1em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

// Generate y-ticks…
var gy = svg.selectAll("g.y")
    .data(y.ticks(10))
  .enter().append("g")
    .attr("class", "y")
    .attr("transform", ty);

gy.append("line")
    .attr("stroke", stroke)
    .attr("x1", 0)
    .attr("x2", size[0]);

gy.append("text")
    .attr("x", -3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

svg.append("rect")
    .attr("width", size[0])
    .attr("height", size[1])
    .attr("stroke", stroke)
    .attr("fill", "none");

function redraw() {
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + "scale(" + d3.event.scale + ")");
}

    </script>
  </body>
</html>
